.menu-grid  {
    .menu-header    {
        border-bottom: 1px solid darken(@bg-primary,3%);
        .box-shadow(0 1px 0 lighten(@bg-primary,3%));  
        padding: 10px 20px;
        font-size: 18px;
        
        .btn    {
            color: #fff;   
        }
    }
    
    .navbar-toggle  {
        .icon-bar   {
            background:#fff;   
        }
    }
    
    .inbox-menu {
        margin-bottom: 0;
        .transition(all 0.5s ease);
        
        @media (min-width: 768px)   {
            height: auto !important;
        }
        
        @media (max-width: 767px)   {
            max-height: 0;
            
            &.menu-display  {
                max-height: 350px;  
                height: auto;
                .transition(all 0.5s ease);
            }
        }
        
        > li  {
            border-bottom: 1px solid darken(@bg-primary,3%);
            .box-shadow(0 1px 0 lighten(@bg-primary,3%));
            
            &.active {
                >  a {
                    background: darken(@bg-primary,5%); 
                  
                    &:hover ,&:focus    {
                        background: darken(@bg-primary,5%);
                    }
                }
            }
            
            > a   {
                display: block;
                color: #fff;
                padding: 10px 20px;
                .transition(all 0.2s ease);
                
                &:hover ,&:focus    {
                    background: darken(@bg-primary,3%);
                    .transition(all 0.2s ease);
                }
            }
            
            .submenu   {
                > li  {
                    border-bottom: 1px solid lighten(@bg-primary,1%);
                    
                    &:last-child    {
                        border-bottom: none;
                        .box-shadow(none);
                    }
                    
                    &.active    {
                        > a {
                            background: darken(@bg-primary,7%);
                            
                            &:hover ,&:focus    {
                                background: darken(@bg-primary,7%);
                            }
                        }
                    }
                    
                     > a   {
                        display: block;
                        color: #fff;
                        padding: 10px 20px;
                        background: darken(@bg-primary,2%);
                        .transition(all 0.2s ease);
                        
                        &:hover ,&:focus    {
                            background: darken(@bg-primary,5%);
                            .transition(all 0.2s ease);
                        }
                    }
                }
            }
        }
    }
}

.inbox-panel {
    margin-bottom: 0;
    .border-radius(0);
    
    .inbox-item  {
        cursor: pointer;
        .transition(all 0.2s ease);
        
        &:hover {
            background: #f7f7f7;    
            .transition(all 0.2s ease);
        }
        
        &.selected {
            color: #ccc;
            background: @light-color;
            border: 1px solid darken(#F1F5FC,3%); 
            .transition(all 0.2s ease);
            
            &:hover    {
                background: @light-color;
                color: #ccc;
            }
        }
        
        .starred    {
            color: @bg-warning;   
        }
        .not-starred    {
            &:hover {
                color: @bg-warning;   
            }
        }
        .from   {
            display: inline-block;
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            vertical-align: middle;
            white-space: nowrap;
            font-weight: bold;
            margin-left: 10px;
            height:19px;
        }
        .detail {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
            text-overflow: ellipsis; 
            width: 50%;
            height:19px;
            
            @media (max-width: 480px)   {
                width: 65%;
            }   
        }
        .attachment {
            margin-right: 15px;
        }
    }
    .panel-footer   {
        .pagination {
            margin: 2px 0 0;
            li  {
                a   {
                    padding: 0 10px;
                    background: transparent;
                    border: none;
                    
                    .large  {
                        font-size: 140%;   
                    }
                }
            }
        }
    }
}

.inbox-action   {
    font-weight: bold;
    background: #fff;
    .border-radius(2px);
    .box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    
    &.active   {
        background: @bg-success;
        color: #fff;
        a   {
            color: #fff;   
            
            &:hover ,&:focus {            
                background-color: @bg-success;
            }
        }
    }
    
    a   {
        display: block;
        padding: 10px;
        color: #777;
        .transition(all 0.2s ease);
        &:hover ,&:focus {            
            text-decoration: none;   
            background-color: #f2f2f2;
            .transition(all 0.2s ease);
        }
    }
}